<template>
  <div
    style="
      width: 1515px;
      box-sizing: border-box;
      padding: 30px 220px 50px;
      background-color: #f0f0f0;
    "
  >
    <div class="main">
      <div class="left" id="image">
        <img
          class="item-img"
          :src="item.tupian"
          alt=""
          width="350"
          height="350"
        />
      </div>
      <div class="right">
        <h2>
          <font style="color: #666">{{ item.pinpai }}</font
          >&nbsp;&nbsp;&nbsp;&nbsp;{{ item.shangpinmingcheng }}
        </h2>
        <hr style="width: 100%" />
        <div style="color: red; font-size: 25px">${{ item.price }}</div>
        <div><font>分类：</font> {{ item.fenlei }}</div>
        <div><font>规格：</font> {{ item.guige }}</div>
        <div><font>生产日期：</font> {{ item.shengchanriqi }}</div>
        <div>
          <font>详细信息：</font>
          <div v-html="item.shangpinxiangqing"></div>
        </div>

        <div>
          <el-button type="danger" size="medium" @click="payHandler()">
            购买
          </el-button>
          <el-button type="primary" size="medium" @click="$router.go(-1)">
            返回
          </el-button>
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="discuss">
      <div>
        <el-input
          v-model="discussComment"
          :rows="2"
          style="width: 500px"
          type="textarea"
          placeholder="说点什么吧"
          clearable
        ></el-input>
        <el-button type="primary" size="small" @click="postAComment"
          >发表评论</el-button
        >
      </div>
      <ul>
        <li v-for="(item, index) in discussDataList" :key="index">
          <div><span style="color: #888">用户：</span>{{ item.userid }}</div>
          <div>
            <span v-html="item.content"></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageIndex: 1, //评论页数，可以加加载更多
      discussDataList: [],
      discussComment: "",
      item: {},
    };
  },
  created() {
    console.log(this.$route.query.item);

    this.item = this.$route.query.item;
    console.log(this.item)
    if (this.item.id) {
      this.$storage.set("detileCommoity", this.item);
    } else {
      this.item = this.$storage.getObj("detileCommoity");
      console.log(this.item)
    }
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 买东西
    payHandler() {
      console.log(this.item);
      this.item;
      this.$storage.set("paytable", "shagndain");
      this.$storage.set("payObject", this.item);
      this.$router.push("/pay");
    },

    getDataList() {
      let params = {
        page: this.pageIndex,
        limit: 10,
        sort: "addtime",
        refid: this.item.id,
      };
      this.$http({
        url: "discusschongwushangdian/list",
        method: "get",
        params: params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.discussDataList = data.data.list;
          console.log(this.discussDataList);
        }
      });
    },
    // 发表评论
    postAComment() {
      let params = {
        content: this.discussComment,
        refid: this.item.id,
      };
      this.$http({
        url: "discusschongwushangdian/add",
        method: "post",
        data: params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.discussComment = "";
              this.getDataList();
            },
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.item-img {
  margin: 0 5px;
  background-repeat: no-repeat;
  background-size: 100%;
  /* -webkit-box-shadow: 5px 5px 5px #444;
  -moz-box-shadow: 5px 5px 5px #444;
  box-shadow: 5px 5px 5px #444; */
  cursor: pointer;
}
.main {
  display: flex;
  .left {
    /* width: fit-content; */
  }
  .right {
    width: 100%;
    padding: 20px 0 0 50px;
    font-size: 17px;
    div {
      margin: 15px 0;
      font {
        color: #888;
      }
    }
  }
}
.discuss {
  display: block;
  width: 100%;
  border-top: 1px solid #888;
  padding: 20px 0;
  div:nth-child(1) {
    display: flex;
    width: fit-content;

    margin: 0 auto 20px;
    .el-button {
      height: 40px;
      margin: 0 5px 10px;
      align-self: center;
    }
  }
  ul li {
    font-size: 18px;
    display: flex;
    list-style: none;
    border-bottom: 1px solid #555;
    padding: 15px 0;
    div:nth-child(1) {
      width: 100px;
      margin: 0;
    }
    div:nth-child(2) {
      margin-left: 80px;
      width: 850px;
      color: #222;
    }
  }
}
</style>